<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#main {
				width: 200px;
				height: 30px;
				border: 1px solid;
				display: flex;
			}

			.d {
				flex: 1;
				text-align: center;
				line-height: 30px;
			}
			.d:hover{
				background-color: #e0e0e0;
			}

			.d2 {
				flex: 3;
			}

			#NumInput {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				padding: 0;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p>单价<span id="price">199</span></p>
		
		<div id="main">
			<div class="d" onclick="minus">-</div>
			<div class="d2">
				<input type="text" id="NumInput" onblur="ItenBlur(this)" />
			</div>
			<div class="d" onclick="plus">+</div>
		</div>

		<p>小计<span id="SubTotal">0</span>元</p>
		<p>共<span id="Num">0</span>件商品</p>
		<p>合计<span id="Total">0</span>元</p>
		
		
		
		<script type="text/javascript">
			
			var Num = document.getElementById("Num")
			var Total = document.getElementById("Total")
			var price = document.getElementById("price")
			var SubTotal = document.getElementById("SubTotal")
		
			function ItenBlur(input) {
				SubTotal.innerHTML = input.value * price.innerHTML
				Num.innerHTML = input.value
				Total.innerHTML = SubTotal.innerHTML
			}
			
			function minus(){
			}
		</script>
	</body>
</html>
